<template>
  <div class="container">
    <el-scrollbar style="height:100%" class="scrollbar-x">
      <el-divider content-position="left">平台主题设置</el-divider>
      <div class="item">
        <el-form 
          :inline="true" 
          :model="formInline" 
          ref="search"
          class="search"
          label-width="110px"
          size="small">
          <el-form-item label="平台名称:">
            <el-input v-model="formInline.username" placeholder="请输入平台名称" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-divider content-position="left">报警提示设置</el-divider>
      <div class="item">
        <span class="item-label">报警提示级别：</span>
        <el-radio-group v-model="radio">
          <el-radio :label="1">一级</el-radio>
          <el-radio :label="2">二级</el-radio>
          <el-radio :label="3">三级</el-radio>
        </el-radio-group>
        <ul class="title-wrap">
          <li>一级：全屏播放视频（非法读卡，非法闯入，非法入侵等）</li>
          <li>二级：平台右下角弹框提示，点击可播放视频</li>
          <li>三级：平台菜单栏电子地图badge标记显示，进入电子地图查看报警闪烁摄像头视频</li>
        </ul>
      </div>
      <el-divider content-position="left">业务流程设置</el-divider>
      <div class="item">
        <span class="item-label">审批人：</span>
        <el-radio-group v-model="radio2">
          <el-radio :label="1">组织结构</el-radio>
          <el-radio :label="2">自定义</el-radio>
        </el-radio-group>
        <ul class="f-flex title-wrap approval" v-show="radio2 == 2">
          <li v-for="(item, index) in approvalList" :key="index">
            <div>
              <el-avatar shape="square" :size="50" :src="item.url"></el-avatar>
              <h6>{{ item.name }}</h6>
            </div>
            <span class="arrow">
              <svg-icon icon-class="arrow_right"></svg-icon>
            </span>
          </li>
          <li>
            <div class="plussign-wrap" @click="handleAdd">
              <el-avatar shape="square" :size="50">
                <span class="plussign">+</span>
              </el-avatar>
            </div>
          </li>
        </ul>
      </div>
    </el-scrollbar>
    <!-- 新增审批人 -->
    <add ref="add"></add>
  </div>
</template>

<script>
import Add from './Add'
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  components: {
    Add
  },
  data() {
    return {
      formInline: {
        username: '',
        
      },
      radio: 1,
      radio2: 1,
      approvalList: [
        {name: '杨过', url: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'},
        {name: '小龙女', url: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'}
      ]
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    // 新增
    handleAdd() {
      this.$refs.add.togglePopup(true)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px 30px;
  height: 100%;
  .item {
    margin-top: 50px;
    margin-bottom: 30px;
    .item-label {
      display: inline-block;
      width: 110px;
      text-align: right;
    }
    .title-wrap {
      margin-left: 120px;
      margin-top: 20px;
      li {
        line-height: 30px;
      }
    }
    .approval {
      li {
        position: relative;
        padding-right: 50px;
        line-height: 20px;
        text-align: center;
        .arrow {
          position: absolute;
          right: 20px;
          top: 15px;
        }
        .plussign-wrap {
          cursor: pointer;
          .plussign {
            font-size: 46px;
          }
        }
        
      }
    }
  }
  
}
</style>
